<template>
	<view  v-if="infoList && infoList.length > 0">
		<!-- 组件页面内容开始 -->
		<view
			class="vertical-carousel"
			style="white-space:break-all; width:360rpx;letter-spacing: 4rpx;font-size: 26rpx; transform: scale(0.9); "
		>
			<view class="content">
				<view
					v-for="(item, index) in infoList"
					:key="index"
					style="display: flex;
    		justify-content: center;align-items: center;"
				>
					<view style="height: 60rpx;width: 60rpx;">
						<image
							style="width: 100%;height: 100%; border-radius: 50%; "
							:src="item.user_avatar"
						></image>
					</view>

					<view
						style="justify-content: center;align-items: center;display: flex;margin-bottom: -10rpx;margin-left: 10rpx;"
					>
						{{ item.is_pay_time }}购买了
						<text style="color: #86e5c5;" >
							{{ item.goods_name }}
						</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 组件页面内容结束 -->
	</view>
</template>

<script>
export default {
	name: "purchaseHistory",
	props: {
		mode: {
			Type: Number,
			default: 1
		},
		priceType: {
			Type: String,
			default: "元"
		},
		showCheckbox: {
			Type: Boolean,
			default: true
		}
	},
	data() {
		return {
			infoList: [
				{ user_avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f351427d-7f5f-4db5-86b5-dfb978658031/c147e691-6e6b-4264-93e1-955c9274141d.jpg',is_pay_time:'30秒前',goods_name:'机关枪' },
				{ user_avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f351427d-7f5f-4db5-86b5-dfb978658031/8a04858c-2818-4cb2-ba70-fab66f9e79cd.jpg',is_pay_time:'10秒前',goods_name:'棒棒糖' },
				{ user_avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f351427d-7f5f-4db5-86b5-dfb978658031/36a9e08f-f297-480b-a2ce-d0079b75a443.jpg',is_pay_time:'5年前',goods_name:'加特林'  },
				{ user_avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f351427d-7f5f-4db5-86b5-dfb978658031/eb930f85-5792-4289-b4b5-eed8cfeef819.jpg',is_pay_time:'上辈子',goods_name:'奥力给'  }
			]
		};
	},
	created() {
	},
	mounted() {},
	methods: {
		// 页面数据初始化函数
		init(options = {}) {
		
		},
		pageTo(path) {
			
		}
	},
	// 过滤器
	filters: {},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped>
.vertical-carousel {
	position: fixed;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	top: 140rpx;
	height: 70rpx;
	border-radius: 40rpx;
	z-index: 666;
}
.content {
	list-style-type: none;
	animation: vertical-move 8s linear infinite;
	transform: translate3d(0, 0, 0);
}
.content > view {
	line-height: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
}
@keyframes vertical-move {
	0% {
		transform: translate(0, 80rpx);
	}
	100% {
		transform: translate(0, calc(30rpx - 100%));
	}
}
</style>
